<link href="/static/css/gloab.css" rel="stylesheet">
    <style>
        @charset "utf-8";
        /* CSS Document */
        .main{width:1080px;min-width:1080px;margin:0 auto;}
        /*login and reg*/
        .reg-box-pan{padding:20px 40px 0px; width:100%;height:400px;}

        span .add_attachment {
                font-size: 80%;
                line-height: 2.5em;
        }
        .add_file_a{cursor:pointer;float:left;display: inline-block;width:30px;background: url("/static/img/icon_add.png") no-repeat center center;background-size:45%;}
        .delete_file{cursor:pointer;float:right;width:30px;background: url("/static/img/icon_del.png") no-repeat center center;background-size:45%;}
        .add_attachment:hover{
                 color:#E4393C;
                 text-decoration: underline;
        }
        .item{
            width:600px;
           margin:0 auto;
            margin-left:110px;
        }
    </style>
<div class="panel panel-default panel-h" style="background-color:#fff;">
<div class="panel-body">
<div class="login-box f-mt10 f-pb50">  
    <div style="margin:0 auto;width:1000px;">
    	<div class="reg-box-pan display-inline">  
        	<div class="step">        	
                <ul>
                    <li class="col-xs-4 on"> 
                        <span class="num"><em class="f-r5" id="one"></em><a href="javascript:;" id="lisense_one"><i class="this_val">1</i></a></span>                	
                        <span class="line_bg lbg-r" id="one"></span>
                        <p class="lbg-txt">上传</p>
                    </li>
                        <li class="col-xs-4">
                        <span class="num"><em></em><a href="javascript:;" id="lisense_two"><i class="this_val">2</i></a></span>
                        <span class="line_bg lbg-l"></span>
                        <span class="line_bg lbg-r"></span>
                        <p class="lbg-txt two_font">选择范围</p>
                    </li>
                    <li class="col-xs-4">
                        <span class="num"><em class="f-r5" id="three"></em><a href="javascript:;" id="lisense_three"><i class="this_val">3</i></a></span>
                        <span class="line_bg lbg-l" id="three"></span>
                        <p class="lbg-txt">升级完成</p>
                    </li>
                </ul>
            </div>
        	<div class="reg-box" id="verifyCheck" style="margin-top:50px;">
            	    <div class="part1">                	
                        <div class="item">
                            <span class="intelligent-label f-fl">&nbsp;</span>    
                            <div class="f-fl">
                                <a href="javascript:;" class="btn btn-blue f-r3" id="create_upgrade">下一步</a>
                                       <p style="margin-top:20px;">上传升级包文件</p>
                            </div>
                        </div>                                  
                    </div>
                    <div class="part2" style="display:none">
                        <div class="item">
                            <span class="intelligent-label f-fl">&nbsp;</span>    
                            <div class="f-fl">
                               <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part2">下一步</a>      
                                
                                
                                <p style="margin-top:20px;">选择要升级的节点，点击下一步继续</p>
                                
                            </div>
                        </div>
                        <div style="padding:0px 100px;">
                            <table id="tb_node_upgrade"></table> 
                        </div>
                    </div>
                    <div class="part3" style="display:none">
                        <div class="item">
                            <span class="intelligent-label f-fl">&nbsp;</span>    
                            <div class="f-fl">
                                <p style="margin-top:20px;">完成</p>
                            </div>
                        </div> <!-- item col-xs-12 -->
                    </div>           
            </div>
             
        </div>
    </div>
   
</div>
</div> <!-- panel-body -->
</div> <!-- panel-default -->
<script>
$(function(){
    var mainpanelHeight = parseInt($(window).height()) - 215; 
    $(".contentpanel").find(".panel:first").css({'height':$(window).height()-80});
    $(".leftpanel").height($(".mainpanel").height());
    mainpanelHeight = parseInt($(window).height()) - 500; 
    if($(window).height()<750){
           $(".panel-h").css({'height':750});
    }
    $(".col-xs-4").each(function(){
        $(this).click(function(){
                if($(this).find("i").text()==1){
                    $(".part2").hide();
                    $(".part3").hide();
		            $(".part1").show(); 
                    $(".step li").eq(2).removeClass("on");
                    $(".step li").eq(1).removeClass("on");
                    $(".step li").eq(0).addClass("on");
                };
                if($(this).find("i").text()==2){
                    $(".part1").hide();
                    $(".part3").hide();
		            $(".part2").show();
                    $(".step li").eq(2).removeClass("on");
                    $(".step li").eq(1).addClass("on");
                }; 
                if($(this).find("i").text()==3){
                    $(".part2").hide();
                    $(".part1").hide();
		            $(".part3").show(); 
                    $(".step li").eq(1).addClass("on");
                    $(".step li").eq(2).addClass("on");
                }; 
                }); 
    });
    $('#tb_node_upgrade').jqGrid({
            url:'/grid_host',
            //postData: postData,
            datatype: 'json',
            mtype: 'GET',
            styleUI : 'Bootstrap',
            colNames:[ "编号",'[[ "label hostname"|translate ]]', 'IP', '[[ "label service"|translate ]]','状态', ],
            colModel :[
                {name:'id', index:'id', width:200, align:'left',hidden:false},
                {name:'name', index:'name', width:200, align:'left'},
                {name:'ip', index:'ip', width:200, align:'left'},
                {name:'lichd_status', index:'lichd_status', width:200, align:'left'},
                {name:'service_status', index:'service_status', width:200, align:'left',sortable:false,hidden:true},
	    ],
            rowNum:10,
            rowList:[10,20,30],
            sortname: 'id',
            sortorder: 'desc',
            viewrecords: true,
            altclass:'ui-priority-secondary',
            altRows:true,
            autowidth:true,
            multiselect: true,
            height:mainpanelHeight,
            gridComplete:function(){ 
                
            },
        resizeStart:function() {
            initial_width=$(this).width();
        },
        resizeStop:function() {
            $(this).width(initial_width);
            $(".ui-jqgrid-hbox").find('.ui-jqgrid-htable').width(initial_width);
        },
	});	
    //第一页的确定按钮
	$("#btn_part1").click(function(){						
		//if(!verifyCheck._click()) return;
		$(".part1").hide();
		$(".part2").show();
		$(".step li").eq(1).addClass("on");
	});
	//第二页的确定按钮
	$("#btn_part2").click(function(){			
		$(".part2").hide();
		$(".part3").show();	
		$(".step li").eq(2).addClass("on");
        var rowIds = $("#grid_alert_table").jqGrid('getGridParam', 'selarrrow');    
    if (rowIds == '') {
        SelfAlert('请先选择一条告警记录');
        return false;
    }
    var ids = ''
    for(var id=0; id<rowIds.length; id++){
        ids += rowIds[id] + ','
        alert(ids);
    }            
    $.post("/handler_alert", {'ids':ids}, function(data) {
        if (data.reply.is_success){
            x=0
//            SelfAlert('标记已处理完成');
        }else{
            error =  data.reply.error;
            SelfAlert(error);
        }
        $("#grid_alert_table").trigger('reloadGrid');
        reload_warning_num();
    });
	});	
	//第三页的确定按钮
	$("#btn_part3").click(function(){
        
	});	
});
         //生成授权
        $("#create_upgrade").click(function(){
            $(".part1").hide();
            $(".part2").show();
		    $(".step li").eq(1).addClass("on");
        })         
    $(".add_file_button").click(function(){
        input_file ='<input type="file" id="upgrade_file" name="upgrade_file"  style="width:420px;border:1px solid #d8dce5;margin:3px;float:left"/><a style="float:right" class="delete_file" title="删除">&nbsp; </a><br>'
        $('.register_submit').append(input_file)
    })
    $("#upgrade_form").delegate(".delete_file","click",function(){
        $(this).prev('#upgrade_file').remove()
        $(this).prev('br').remove()
        $(this).remove()
    });
</script>
